<template>
  <!--渲染Echarts图表的容器-->
  <div>
    <el-tabs :tab-position="tabPosition" style="height: 500px; " @tab-click="handleClick">
      <el-tab-pane label="个人月收支">
        <div id="main"></div>
      </el-tab-pane>
      <el-tab-pane label="当月收/支构成">
        <div id="main1" style=" height:500px;width:500px"></div>
      </el-tab-pane>
      <el-tab-pane label="资产统计">
        <div id="main2" style=" height:500px;width:500px"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 引入Echarts
import * as echarts from "echarts";
import DateApi from "@/api/detailed/subject";
export default {
  // 属性
  data() {
    return {
      tabPosition: "left",
      // 保存原始数据
      option: {
        title: {
          text: "个人月收支图",
          subtext: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["支出", "收入"]
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: []
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "支出",
            type: "bar",
            data: []
          },
          {
            name: "收入",
            type: "bar",
            data: []
          }
        ]
      },
      option1: {
        title: {
          text: "月收支对比图",
          subtext: "",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "收支对比",
            type: "pie",
            radius: "50%",
            data: [
              { value: "", name: "支出" },
              { value: "", name: "收入" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      option2: {
        title: {
          text: "资产统计图",
          subtext: "",
          left: "center"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [],
            type: "line",
            areaStyle: {}
          }
        ]
      }
    };
  },
  // 生命周期函数
  mounted() {
    const username = window.sessionStorage.getItem('username');
    this.initdata(username);
  },
  // 方法定义
  methods: {
    handleClick(tab, event) {
      const username = window.sessionStorage.getItem('username');
      console.log("tab, event", tab, event);
      if (tab.index == 1) {
        DateApi.getdata(username).then(res => {
          this.option1.series[0].data[0].value = res.data.intotal;
          this.option1.series[0].data[1].value = res.data.outtotal;
          this.inittwo();
        });
      }
      if (tab.index == 2) {
        DateApi.getdata(username).then(res => {
          this.option2.series[0].data = res.data.capList;
          this.option2.xAxis.data = res.data.Xlist;
          this.initthree();
        });
      }
    },
    // 数据格式化
    // 渲染Echarts图表
    initdata(username) {
      DateApi.getdata(username).then(res => {
        this.option.xAxis[0].data = res.data.Xlist;
        this.option.series[0].data = res.data.income;
        this.option.series[1].data = res.data.outcome;
        this.initEcharts();
      });
    },
    // 渲染Echarts图表
    initEcharts() {
      // 获取DOM元素（根据id）
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.option);
    },
    inittwo() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.option1);
    },
    initthree() {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.option2);
    }
  }
};
</script>

<style>
#main {
  width: 800px;
  height: 500px;
}
</style>